<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>海淀驾校</title>
    <link rel="stylesheet" href="../day8/css/reset.css" />
    <link rel="stylesheet" href="../day8/css/style.css" />
    <link rel="stylesheet" href="./font/iconfont.css" />
  </head>
  <body>
    <div id="app">
      <!-- 这是头部 -->
      <header>
        <img src="../day8/img/llogo.png" alt="" />
        <span class="iconfont icon-youjian youjian"></span>
      </header>
      <!-- 这是背景图 -->
      <img
        src="../day8/img/d37c90d973cf4c65044564637021023.png"
        alt=""
        class="bg"
      />
      <!-- 这是须知 -->
      <article>
        <span class="iconfont icon-lingdang"></span>
        <span class="stu">学员必看:</span>
        <span class="tui">退考须知</span>
        <span class="yue">约考须知</span>
      </article>

      <!-- 这是nav-->
      <nav>
        <div class="item">
          <svg class="icon red" aria-hidden="true">
            <use xlink:href="#icon-qiyekaifazhe"></use>
          </svg>
          <span>企业发展</span>
        </div>
        <div class="item">
          <svg class="icon yellow" aria-hidden="true">
            <use xlink:href="#icon-compass"></use>
          </svg>
          <span>学车指南</span>
        </div>
        <div class="item">
          <svg class="icon red" aria-hidden="true">
            <use xlink:href="#icon-fangxiangpan"></use>
          </svg>
          <span>班型介绍</span>
        </div>
        <div class="item">
          <svg class="icon blue" aria-hidden="true">
            <use xlink:href="#icon-baomingzhongxin"></use>
          </svg>
          <span>报名中心</span>
        </div>
        <div class="item">
          <svg class="icon yellow" aria-hidden="true">
            <use xlink:href="#icon-banchefuwu"></use>
          </svg>
          <span>班车服务</span>
        </div>
        <div class="item">
          <svg class="icon green" aria-hidden="true">
            <use xlink:href="#icon-website"></use>
          </svg>
          <span>理论学习</span>
        </div>
        <div class="item">
          <svg class="icon blue" aria-hidden="true">
            <use xlink:href="#icon-monikaoshi"></use>
          </svg>
          <span>模拟考试</span>
        </div>
        <div class="item">
          <svg class="icon green" aria-hidden="true">
            <use xlink:href="#icon-che"></use>
          </svg>
          <span>预约训练</span>
        </div>
        <div class="item">
          <svg class="icon blue" aria-hidden="true">
            <use xlink:href="#icon-chaxun"></use>
          </svg>
          <span>综合查询</span>
        </div>
        <div class="item">
          <svg class="icon yellow" aria-hidden="true">
            <use xlink:href="#icon-a-qiandaoqiantui"></use>
          </svg>
          <span>签到签退</span>
        </div>
        <div class="item">
          <svg class="icon green" aria-hidden="true">
            <use xlink:href="#icon-changjianwenti"></use>
          </svg>
          <span>在线客服</span>
        </div>
        <div class="item">
          <svg class="icon blue" aria-hidden="true">
            <use xlink:href="#icon-zaixianjiaofei"></use>
          </svg>
          <span>在线缴费</span>
        </div>
      </nav>

      <!-- 这是main -->
      <main>
        <div class="new">
          <svg class="icon laba" aria-hidden="true">
            <use xlink:href="#icon-laba-lan"></use>
          </svg>
          <span class="news">新闻资讯</span>
        </div>
        <span class="more">查看更多</span>
      </main>

      <!-- 这是section -->
      <div class="d">
        <section>
          <img src="../day8/img/d37c90d973cf4c65044564637021023.png" alt="" />

          <div>
            <span class="article">海驾摩托车节 | 全新优惠，全面出击</span>

            <div class="tad">
              <span class="type"> 海驾行动 </span>
              <span class="day">14天前</span>
            </div>
          </div>
        </section>
        <section>
          <img src="../day8/img/d37c90d973cf4c65044564637021023.png" alt="" />

          <div>
            <span class="article">海驾摩托车节 | 全新优惠，全面出击</span>

            <div class="tad">
              <span class="type"> 海驾行动 </span>
              <span class="day">14天前</span>
            </div>
          </div>
        </section>
        <section>
          <img src="../day8/img/d37c90d973cf4c65044564637021023.png" alt="" />

          <div>
            <span class="article">海驾摩托车节 | 全新优惠，全面出击</span>

            <div class="tad">
              <span class="type"> 海驾行动 </span>
              <span class="day">14天前</span>
            </div>
          </div>
        </section>
        <section>
          <img src="../day8/img/d37c90d973cf4c65044564637021023.png" alt="" />

          <div>
            <span class="article">海驾摩托车节 | 全新优惠，全面出击</span>

            <div class="tad">
              <span class="type"> 海驾行动 </span>
              <span class="day">14天前</span>
            </div>
          </div>
        </section>
        <section>
          <img src="../day8/img/d37c90d973cf4c65044564637021023.png" alt="" />

          <div>
            <span class="article">海驾摩托车节 | 全新优惠，全面出击</span>

            <div class="tad">
              <span class="type"> 海驾行动 </span>
              <span class="day">14天前</span>
            </div>
          </div>
        </section>
      </div>

      <!-- 这是footer -->
      <footer>
        <div class="foot">
          <svg class="icon pic" aria-hidden="true">
            <use xlink:href="#icon-zhuyelan"></use>
          </svg>
          <span>主题</span>
        </div>
        <div class="foot">
          <svg class="icon pic" aria-hidden="true">
            <use xlink:href="#icon-baoming"></use>
          </svg>
          <span>报名</span>
        </div>
        <div class="foot">
          <svg class="icon pic" aria-hidden="true">
            <use
              xlink:href="#icon-tongxinyuan
            "
            ></use>
          </svg>
          <span>驾考圈</span>
        </div>
        <div class="foot">
          <svg class="icon pic" aria-hidden="true">
            <use xlink:href="#icon-wode"></use>
          </svg>
          <span>我的</span>
        </div>
      </footer>
    </div>
    <script src="../day8/js/flexible.js"></script>
    <script src="../day8/font/iconfont.js"></script>
  </body>
</html>
